<template>
  <div class="home">
    <h5 id="box">{{ num }}</h5>
    <button @click="num++">改变num</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world",
      num: 10,
    };
  },
  beforeCreate() {
    console.log(this.msg);
    //实例都没创建 data和methods都不能用
  },
  created() {
    console.log(this.msg);
    //实例创建成功 是最早的一个可以使用data和methods的钩子函数
  },

  beforeMount() {
    let box = document.getElementById("box");
    console.log(box);
    //dom节点还没有渲染到页面中
  },
  mounted() {
    let box = document.getElementById("box");
    console.log(box);
    //整个页面渲染成功
  },
  //到这里 整个页面才完全渲染完成
  // 以上是创建阶段的4个钩子函数 只执行一次

  beforeUpdate() {
    console.log(this.num);
    let box = document.getElementById("box");
    console.log(box.innerHTML);
  },
  //指的是数据变了视图还未更新的时候会调用
  updated() {
    console.log(this.num);
    let box = document.getElementById("box");
    console.log(box.innerHTML);
  },
  //更新之后 数据和视图保持一致
  //以上是运行阶段的钩子函数 可以执行0次或者无数次

  // 销毁阶段的
  beforeDestroy() {},
  //销毁之前 是最后一个可以使用data 和 methods的钩子函数
  destroyed() {},
  //
};
</script>
